<template>
	<view class="cart-item">
		<view class="cart-item-left">
			<view class="content">
				<view class="content-picture">
					<image
						class="content-picture-image"
						:src="BASE_URL + data.thumbnail"
						mode="aspectFit"
					></image>
				</view>
				<view class="content-detial">
					<view class="content-detial-name">{{ data.name }}</view>
					<view class="content-detial-text">
						<text class="content-detial-text-category">{{ data.categoryName }}</text>
						<text class="content-detial-text-wishes">9999人</text>
						<text class="content-detial-text-normal">想吃</text>
					</view>

					<view class="content-detial-rating">
						<uni-rate :value="4" :size="18" allowHalf readonly />
						<text class="content-detial-rating-score">{{ data.avgRating }}分</text>
						<text class="content-detial-rating-count">{{ data.ratingCount }}次</text>
					</view>
				</view>
			</view>
		</view>
		<view class="cart-item-right">
			<text class="cart-item-right-text" @tap="onDelete">移除</text>
		</view>
	</view>
</template>

<script setup>
import { BASE_URL } from '../../config/config';

const $emits = defineEmits(['delete']);

const $props = defineProps({
	data: { type: Object, default: () => ({}) },
});

const onDelete = () => {
	$emits('delete', $props.data);
};
</script>

<style scoped>
.cart-item {
	width: 100%;
	height: 180rpx;
	display: flex;
	/* outline: 1px solid red; */
	margin: 36rpx 0;
	background-color: #f8f8f8;
}

.cart-item-left {
	flex: 1;
}

.content {
	display: flex;
}

.content-picture-image {
	width: 180rpx;
	height: 180rpx;
}

/* 菜品详情 */
.content-detial {
	flex: 1;
	padding: 12rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.content-detial-name {
	color: #101010;
	font-weight: bold;
	font-size: 16px;
}

.content-detial-text {
}

.content-detial-text-category,
.content-detial-text-normal {
	color: #6d6d6d;
	font-size: 14px;
}

.content-detial-text-wishes {
	margin: 0 16rpx;
	color: #ff6b00;
	font-size: 14px;
}

.content-detial-rating {
	display: flex;
}

.content-detial-rating-score {
	margin: 0 16rpx;
	font-size: 14px;
	color: #fac909;
	font-weight: bold;
}

.content-detial-rating-count {
	font-size: 14px;
	color: #363636;
}

/* 移除 */
.cart-item-right {
	width: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ff183c;
}

.cart-item-right-text {
	font-size: 14px;
	color: white;
}
</style>
